<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ nick || '' }}</view>
				<view></view>
			</view>
			
			<!-- tabs -->
			<view class="flex-center-around" style="padding: 14rpx 30rpx 26rpx;">
				<view
				v-for="(item, index) in tabs"
				:key="index"
				:class="['u-f-36 u-lh-50 tab-item', index === tabIndex ? 'font-medio' : 'color-grew']"
				@click="tabIndex = index">
					<view class="flex-center">
						<view class="u-m-r-10">{{ tabObj[item.key] || 0 }}</view>
						<view>{{ lang_common[item.key] }}</view>
					</view>
					
					<view v-if="tabIndex === index" class="tab-item-line"></view>
				</view>
			</view>
			<!-- 分割线 -->
			<u-gap height="1" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>
		</view>
		
		<!-- 列表 -->
		<swiper style="height: calc(100vh - 214rpx - var(--status-bar-height));" :current="tabIndex"
			@change="tabIndex = $event.detail.current">
			<swiper-item v-for="(item, index) in tabs" :key="index">
				<follow-list ref="mescrollItem" :i="index" :index="tabIndex" :user-id="userId" @change="changeAction"></follow-list>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import FollowList from './components/follow-list.vue'
	export default {
		components: { FollowList },
		data() {
			// 初始化顶部导航栏
			let tabs = ['follow', 'fans'].map((item, index) => {
				let result = {
					key: item,
					value: index
				}
				return result
			})
			
			return {
				tabs,
				tabIndex: 0,
				tabObj: {},
				userId: '',
				nick: ''
			}
		},
		onShow() {
			let userId = this.userId
			this.userId = ''
			let timer = setTimeout(() => {
				this.userId = userId
			})
		},
		// 获取类型
		onLoad({ type, nick, userId }) {
			this.nick = nick
			this.userId = userId
			this.tabIndex = this.tabs.findIndex(item => item.key === type)
		},
		methods: {
			changeAction({ index, number }) {
				this.$set(this.tabObj, this.tabs[index].key, number)
			}
		}
	}
</script>

<style scoped lang="scss">
	.tab-item {
		position: relative;
		top: 0;
		left: 0;
		width: max-content;
		
		&-line {
			position: absolute;
			bottom: -26rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 82rpx;
			height: 4rpx;
			background: #333333;
		}
	}
</style>
